<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>侧边滑动菜单</title>
	<style>
		*{padding:0;margin:0;}
		#did{
			width:400px;
			height:200px;
			top:40px;
			left:-350px;
			border:1px solid red;
			position:absolute;
		}
	</style>
</head>
<body>
	<h1>侧边滑动菜单</h1>
	<div id="did" >
		<ul>
			<li>11111</li>
			<li>22222</li>
			<li>33333</li>
			<li>44444</li>
		</ul>
	</div>
</body>
	<script>
		did = document.getElementById("did");
		mytime=null;
		did.onmouseover=function(){
			// this.style.marginLeft="0px";
			lw = 3;
			if(mytime==null){
				mytime = setInterval(function(){
					if(did.offsetLeft>=0){
						clearInterval(mytime);
						mytime=null;
					}
					did.style.left = did.offsetLeft+lw+"px";
				},10);
			}
		}
		did.onmouseout=function(){
			rw=5;
			if(mytime==null){
				mytime=setInterval(function(){
					if(did.offsetLeft<=-350){
						clearInterval(mytime);
						mytime=null;
					}
					did.style.left = did.offsetLeft-rw+"px";
				},10);
			}
		}
	</script>
</html>